<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            /*消除body的外边距*/
            margin: 0;
        }
        #nav{
            width: 100%;
            position: fixed;
            top: 0px;
            /*background-color: red;*/
            /*设置盒子的阴影*/
            /*第一个值上下阴影 第二个值左右阴影
            第三个值 模糊度 第四个值颜色*/
            box-shadow: 0px 0px 4px black;
            
            background-color: white;

            /*视图层次 值越大，越在上面*/
            z-index: 10;
        }
        #nav div{
            /*定宽*/
            width: 900px;
            /*background-color: yellow;*/
            /*居中*/
            margin: 0 auto;
            /*设置内边距 上下左右 都是10px*/
            padding:10px;
        

        }
        #nav img{
            height: 50px;
        } 
        #nav span{
            /*浮动到右侧*/
            float: right;
            margin-top: 20px;
        }
        #nav a{
            /*文本装饰样式 none没有装饰*/
            text-decoration:none;
            margin-right: 10px;
        }

        /*header*/
        #header{
            margin-top: 70px;

        }
        #header img{
            width: 100%;
        }
        p{
            width: 900px;
            text-indent: 2em;
            margin: 10px auto;
        }

        h2{
            /*设置左边框线*/
            /*
            10px 表示 边框线的宽度
            solid 表示边框的样式 实线边框
            orange：表示边框的颜色
            */
            border-left: 10px solid orange;
            color: orange;
            /*设置左内边距*/
            padding-left: 10px;
        }
        #main div img{
            /*img是一个行内块元素
            而定宽居中只对块元素（div p 等）*/
            /*解决方式：将元素类型更改为块元素*/
            width: 900px;
            /*display 展现的意思 设置元素的类型*/
            /*将img元素 更改为block块元素*/
            display: block;
            margin: 5px auto;
        }

        #main div div{
            background-color: rebeccapurple;
            width: 900px;
            height: 600px;
            margin: 5px auto;
            /*设置背景图片*/
            background-image: url(classmates.jpg);

            position: relative;
        }

        #main div div img{
            /*给图片添加边框*/
            border:3px solid white;
            /*边框半径 当宽度和高度一致时，50%的边框半径可以制作一个圆*/
            border-radius: 50%;
             position: absolute;
        }

        #main div div img:nth-child(1){
            width: 300px;
            height: 300px;
            left: 0;
            top: 0;
        }
        
        #main div div img:nth-child(2){
            width: 200px;
            height: 200px;
            /*position: absolute;*/
            left: 300px;
            top: 100px;
        }
        #main div div img:nth-child(3){
            width: 250px;
            height: 250px;
            /*position: absolute;*/
            left: 600px;
            top: 300px;
        }

        hr{
            width: 900px;
            margin: 5px auto;
            
        }
        #footer{
            margin-top: 20px;
        }
        .footerP{
            text-indent: 0;
            text-align: center;
        }

    </style>
</head>
<body>
    <!--导航-->
    <div id="nav">
        <div>
            <img src="logo.png" alt="logo">
            <span>
                <a href="#">首页</a>
                <a href="#HTML5">HTML5</a>
                <a href="#classmate">我的同学</a>
                <a href="#hometown">我的家乡</a>
                <a href="#school">我的学校</a>
                <a href="#">关于我</a>

            </span>
        </div>
    </div>

    <!--头-->
    <div id="header">
        <img src="header.jpg" alt="头图片">
        <p id="HTML5">
            学好一门技术的唯一方法是使用它，在使用它的过程中才能真正学会它。 如果能够在使用它的过程中体会到乐趣，就是学习的最佳状态。希望大家在学习HTML5的过程中多多练习，多敲代码一定会有回报，意想不到的收获都会在使用的过程中迸发出来。
            学好一门技术的唯一方法是使用它，在使用它的过程中才能真正学会它。
            学好一门技术的唯一方法是使用它，在使用它的过程中才能真正学会它。
            学好一门技术的唯一方法是使用它，在使用它的过程中才能真正学会它。
            学好一门技术的唯一方法是使用它，在使用它的过程中才能真正学会它。
            学好一门技术的唯一方法是使用它，在使用它的过程中才能真正学会它。
            学好一门技术的唯一方法是使用它，在使用它的过程中才能真正学会它。
        </p>
    </div>
    <!--div#main-->
    <div id="main">
        <!--html5-->
        <div>
            <h2>HTML5</h2>
            <img  src="html5.jpg" alt="html5图片">
            <p>
                从小就喜欢学习，感觉自己的自学能力超强，也喜欢把自己学会的知识分享给大家。我希望自己能够成为一个好老师，把每一个同学都教好，让他们都能有所成就。我认为一个好老师不仅要有较好的技术，也要对学生严格要求。放任不管只有部分同学能安心学习，严格要求才能保证绝大多数同学都能稳下心来好好学习。
            </p>
        </div>
        <!--我的同学-->
        <div>
            <h2>我的同学</h2>
            <div id="classmate">
                <img src="ldh.jpg" alt="刘德华">
                <img src="wf.png" alt="王菲">
                <img src="lry.jpg" alt="刘若英">
            </div>
            <!--<img src="classmates.jpg" alt="classmate图片">-->
            <p>
                王菲、刘若英、刘德华：很高兴和你们一起学习HTML5，感谢在这个美好的季节遇见你们！
            </p>
        </div>
        <!--我的学校-->
        <div>
            <h2>我的学校</h2>
            <img id="school" src="lzu.jpg" alt="我的学校图片">
            <p>
                我的大学----兰州大学。在这里度过了我人生中最难忘的四年时光。那里的风光，那里的人，那里的图书馆，还有那里蓝蓝的天和金黄的秋天，每每回想想来总是让心中久久不能平复。
            </p>
        </div>
        <!--我的家乡-->
        <div>
            <h2>我的家乡</h2>
            <img id="hometown" src="hometown.jpg" alt="我的家乡图片">
            <p>
                我的家乡在东北我的家乡在东北我的家乡在东北我的家乡在东北我的家乡在东北我的家乡在东北
            </p>
        </div>

    </div>

    <div id="footer">
        <hr>
        <p class="footerP">&copy;2016&#x3000;智游教育&#x3000;版权所有&#x3000;&#x3000;0371-123456789&#x3000;&#x3000;&#x3000;郑州市经开区河南通信产业园6楼605</p>
    </div>
</body>
</html>